<template>
  <DIV class="bg_write" v-loading="loading">
    <el-col :span="24" class="content_title">
      <el-col :span="12">
        <HeadTitle></HeadTitle>
      </el-col>
    </el-col>
    <el-col :span="24" class>
      <div class="content_edit" style="background: none" v-loading="loading">
        <div class="black">
          <h5>快递信息</h5>
          <el-form
            class="mar_top_20"
            :model="data"
            :rules="dataYZ"
            ref="data"
            label-width="200px"
          >
            <el-form-item label="合作快递" prop="title">
              <el-col :span="6">
                <el-input v-model="data.title" clearable></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="快递鸟编码" prop="title_en">
              <el-col :span="8">
                <el-input
                  v-model="data.title_en"
                  clearable
                  placeholder="请输入快递鸟公司编码"
                >
                  <template slot="append">
                    <a
                      href="http://www.kdniao.com/file/快递鸟接口支持快递公司编码.xlsx"
                      target="_blank"
                      class="g-c-b g-ml-10"
                      >查看快递公司编码</a
                    >
                  </template>
                </el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-col :span="6">
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="success"
                  @click="showEditDialog(data.id)"
                >
                  区域价格
                </el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="danger"
                  @click="showEditDialogNot(data.id)"
                >
                  不配送区域
                </el-button>
              </el-col>
            </el-form-item>

            <el-form-item label="首重价格" prop="first_weight">
              <el-col :span="6">
                <el-input
                  type="number"
                  v-model="data.first_weight"
                  clearable
                ></el-input>
              </el-col>
              <el-col :span="1" class="danjia">元</el-col>
            </el-form-item>

            <el-form-item label="续重价格">
              <el-col :span="6">
                <el-input
                  type="number"
                  v-model="data.continued_weight"
                  clearable
                ></el-input>
              </el-col>
              <el-col :span="1" class="danjia">元</el-col>
            </el-form-item>

            <el-form-item label="是否满额包邮">
              <el-col :span="8">
                <el-radio-group v-model="data.is_free_post">
                  <el-radio label="0">否</el-radio>
                  <el-radio label="1">是</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>

            <el-form-item label="满额包邮金额" v-if="data.is_free_post == 1">
              <el-col :span="6">
                <el-input
                  type="number"
                  v-model="data.free_post"
                  clearable
                ></el-input>
              </el-col>
              <el-col :span="1" class="danjia">元</el-col>
            </el-form-item>

            <el-form-item label="发件人">
              <el-col :span="4">
                <el-input v-model="data.kdn_sender_name" clearable></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="发件人电话">
              <el-col :span="4">
                <el-input v-model="data.kdn_sender_mobile" clearable></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="发件人省市区">
              <el-col :span="6">
                <city-cascader
                  :level="2"
                  size="large"
                  @change="handleChange"
                  :placeholder="
                    [
                      data.kdn_sender_province || '',
                      data.kdn_sender_city || '',
                      data.kdn_sender_area || '',
                    ].join('-')
                  "
                />
              </el-col>
            </el-form-item>

            <el-form-item label="发件人地址">
              <el-col :span="6">
                <el-input
                  v-model="data.kdn_sender_address"
                  clearable
                ></el-input>
              </el-col>
            </el-form-item>

            <template
              v-if="
                $store.state.plugin &&
                $store.state.plugin.qsps &&
                $store.state.plugin.qsps.is_open == 1
              "
            >
              <el-form-item label="骑手配送是否满额包邮">
                <el-col :span="8">
                  <el-radio-group v-model="data.is_rider">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>

              <el-form-item
                label="骑手配送满额包邮金额"
                v-if="data.is_rider == 1"
              >
                <el-col :span="6">
                  <el-input
                    type="number"
                    v-model="data.rider_free"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="1" class="danjia">元</el-col>
              </el-form-item>
            </template>

            <template
              v-if="
                $store.state.plugin &&
                $store.state.plugin.kdlwnjk &&
                $store.state.plugin.kdlwnjk.is_open == 1
              "
            >
              <el-form-item label="快递鸟电商">
                <el-col :span="8">
                  <el-radio-group v-model="data.is_kdl">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>

              <el-form-item label="物流快递鸟客户号" v-if="data.is_kdl == 1">
                <el-col :span="6">
                  <el-input
                    v-model="data.kdn_customer_name"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="物流客户密钥" v-if="data.is_kdl == 1">
                <el-col :span="6">
                  <el-input
                    type="textarea"
                    :rows="4"
                    v-model="data.kdn_customer_pwd"
                    clearable
                  ></el-input>
                </el-col>
              </el-form-item>
            </template>

            <el-form-item>
              <el-col :span="4" class="tc">
                <el-button
                  :loading="$store.state.isLoading"
                  size="medium"
                  type="primary"
                  @click.prevent="addUpdate('data')"
                  >确定</el-button
                >
              </el-col>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-col>

    <el-dialog
      :close-on-click-modal="false"
      :title="this.data.title"
      :visible.sync="dialogTableVisible"
    >
      <el-table
        v-loading="load"
        ref="multipleTable"
        :data="list"
        height="400"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="省份" min-width="150">
          <template slot-scope="scope">
            <div v-show="!scope.row.show">{{ scope.row.province }}</div>
            <div v-show="scope.row.show">
              <el-select v-model="scope.row.province" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                ></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="首重" min-width="150">
          <template slot-scope="scope">
            <div v-show="!scope.row.show">
              {{ scope.row.first_weight | keepTwoNum }}元
            </div>
            <div v-show="scope.row.show">
              <el-col :span="12">
                <el-input
                  placeholder="请输入首重金额"
                  v-Int
                  type="text"
                  v-model="scope.row.first_weight"
                  style="width: 100px"
                ></el-input>
              </el-col>
              <el-col :span="1" class="danjia">元</el-col>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="续重" min-width="150">
          <template slot-scope="scope">
            <div v-show="!scope.row.show">
              {{ scope.row.continued_weight | keepTwoNum }}元
            </div>
            <div v-show="scope.row.show">
              <el-col :span="12">
                <el-input
                  placeholder
                  v-model="scope.row.continued_weight"
                  style="width: 100px"
                ></el-input>
              </el-col>
              <el-col :span="1" class="danjia">元</el-col>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button
              :loading="$store.state.isLoading"
              v-if="scope.row.show"
              size="mini"
              @click="saveItem(scope.$index, scope.row)"
              >保存</el-button
            >
            <el-button
              :loading="$store.state.isLoading"
              v-else
              size="mini"
              @click="showItem(scope.$index)"
              >编辑</el-button
            >
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              @click="deleteItem(scope.$index, scope.row)"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="mar_top_15">
        <el-button
          :loading="$store.state.isLoading"
          size="medium"
          type="primary"
          @click.prevent="addItem"
          >添加</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="不配送地区设置"
      :visible.sync="dialogTableVisibleNot"
      width="500px"
    >
      <el-table
        v-loading="loadNot"
        ref="multipleTable1"
        :data="notList"
        height="400"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="省份" min-width="150">
          <template slot-scope="scope">
            <div v-show="!scope.row.show">{{ scope.row.province }}</div>
            <div v-show="scope.row.show">
              <el-select v-model="scope.row.province" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                ></el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button
              :loading="$store.state.isLoading"
              v-if="scope.row.show"
              size="mini"
              @click="saveItemNot(scope.$index, scope.row)"
            >
              保存
            </el-button>
            <el-button
              :loading="$store.state.isLoading"
              v-else
              size="mini"
              @click="showItemNot(scope.$index)"
            >
              编辑
            </el-button>
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              @click="deleteItemNot(scope.$index, scope.row)"
              type="danger"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="mar_top_15">
        <el-button
          :loading="$store.state.isLoading"
          size="medium"
          type="primary"
          @click.prevent="addItemNot"
        >
          添加
        </el-button>
      </div>
    </el-dialog>
  </DIV>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import cityCascader from "@/components/currency/cityCascader/cityCascader";
import { mapState } from "vuex";
export default {
  data() {
    var checkIden = (rule, value, callback) => {
      setTimeout(() => {
        if (!/^[a-zA-Z]([_a-zA-Z0-9]{0,})$/.test(value)) {
          callback(new Error("请输入快递对应的编码"));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      dialogTableVisible: false,
      show: false,
      loading: false,
      load: false,
      options: [],
      areaId: "",
      list: [],
      data: {
        sid: 0,
        title: "",
        title_en: "",
        first_weight: "0",
        continued_weight: "0",
        is_free_post: "0",
        free_post: "0",
        types: "0",
        is_rider: "0",
        rider_free: "0",
        is_kdl: "0",
        kdn_sender_province: "",
        kdn_sender_city: "",
        kdn_sender_area: "",
        kdn_sender_address: "",
      },
      dataYZ: {
        title: [{ required: true, message: "请输入合作快递", trigger: "blur" }],
        title_en: [
          { required: true, message: "请输入快递编码", trigger: "blur" },
          { validator: checkIden, trigger: "blur" },
        ],
        first_weight: [
          { required: true, message: "请输入首重价格", trigger: "blur" },
        ],
      },
      dialogTableVisibleNot: false,
      notList: [],
      loadNot: false,
    };
  },
  computed: {
    ...mapState({
      plugin: (state) => state.plugin,
    }),
    isOpenQs() {
      if (this.plugin.qsps == undefined) {
        return false;
      } else if (this.plugin.qsps && this.plugin.qsps.is_open == "0") {
        return false;
      } else {
        return true;
      }
    },
  },
  components: {
    HeadTitle,
    cityCascader,
  },
  methods: {
    handleChange(value) {
      if (value) {
        for (var i = 0; i < value.length; i++) {
          if (i == 0) this.data.kdn_sender_province = value[i];
          if (i == 1) this.data.kdn_sender_city = value[i];
          if (i == 2) this.data.kdn_sender_area = value[i];
        }
      }
    },
    addItemNot() {
      this.notList.push({ show: true });
    },
    showItemNot(index) {
      this.notList[index].show = true;
    },
    deleteItemNot(index, row) {
      var data = { id: row.id };
      this.$api.getUser.mail_not_del(data);
      this.notList.splice(index, 1);
    },
    saveItemNot(index, row) {
      if (row.province == undefined || row.province == "") {
        this.$fnc.alertError("请填写完整");
        return false;
      }
      this.notList[index].show = false;
      if (row.id == undefined) {
        var data = {
          mid: this.areaId,
          province: row.province,
        };
        this.$api.getUser.mail_not_saveadd(data).then((res) => {
          this.notList[index].id = res.data.result;
        });
      } else {
        var data1 = {
          province: row.province,
          id: row.id,
        };
        this.$api.getUser.mail_not_saveedit(data1);
      }
    },
    showEditDialogNot(id) {
      this.dialogTableVisibleNot = true;
      this.areaId = id;
      this.getNewsAllNot(id);
    },
    getNewsAllNot(id) {
      this.loadNot = true;
      var data = { id: id };
      this.$api.getUser.mail_not_lists(data).then((res) => {
        if (res.data.code == 200) {
          this.notList = res.data.result || [];
        }
        this.loadNot = false;
      });
    },
    getCity() {
      this.$api.getCity.getPro({ pid: 0 }).then((res) => {
        if (res.data.code == 200) {
          this.options = res.data.result;
        }
      });
    },
    addItem() {
      this.list.push({ show: true });
    },
    showItem(index) {
      this.list[index].show = true;
    },
    deleteItem(index, row) {
      var data = { id: row.id };
      this.$api.getUser.delMailArea(data);
      this.list.splice(index, 1);
    },
    saveItem(index, row) {
      if (
        row.province == undefined ||
        row.first_weight == undefined ||
        row.continued_weight == undefined
      ) {
        this.$fnc.alertError("请填写完整");
        return false;
      }
      this.list[index].show = false;
      if (row.id == undefined) {
        var data = {
          cid: this.areaId,
          province: row.province,
          first_weight: row.first_weight,
          continued_weight: row.continued_weight,
        };
        this.$api.getUser.addMailArea(data).then((res) => {
          this.list[index].id = res.data.result;
        });
      } else {
        var data1 = {
          province: row.province,
          first_weight: row.first_weight,
          continued_weight: row.continued_weight,
          id: row.id,
        };
        this.$api.getUser.editMailArea(data1);
      }
    },
    showEditDialog(id) {
      console.log(id);
      this.dialogTableVisible = true;
      this.areaId = id;
      this.getNewsAll(id);
    },
    getDetail() {
      var data = { sid: "0" };
      this.$api.getUser.getMailDetail(data).then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.result;
        }
      });
    },
    addUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {};
          params = JSON.parse(JSON.stringify(this.data));
          params.sid = 0;

          this.$api.getUser.MailSaveEdit(params).then((res) => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess({ text: "编辑成功" });
            } else {
              this.$fnc.alertError(res.data.result); //失败弹出框
            }
          });
        }
      });
    },
    getNewsAll(cid) {
      this.load = true;
      var data = { cid: cid };
      this.$api.getUser.getMailArea(data).then((res) => {
        if (res.data.code == 200) {
          for (var i in res.data.result) {
            if (res.data.result[i].show) {
              res.data.result[i].show = false;
            }
          }
          this.list = res.data.result;
        }
        this.load = false;
      });
    },
  },
  beforeCreate() {
    this.loading = true; //数据未加载之前调用loading
  },
  created() {
    this.getDetail();
    this.getCity();
  },
  watch: {},
};
</script>
